/*
 * @Description: react原生组件导出
 * @Author: linzejian
 * @Date: 2021-07-21 11:54:48
 * @LastEditTime: 2021-07-23 10:48:14
 * @LastEditors: Please set LastEditors
 */
import React from "react";
import ApiURL from './utils/HttpClientRequest/ApiURL';

class ReactComClass extends React.Component {
  // react原生组件的形式比较熟悉
  constructor(props){
    console.log(`constructor:props`, props)
    super(props);
    //定义数据
    this.state = {
        title:'FetchJsonp',
        listData:[],
    }
  }

  componentDidMount() {
    console.log(`componentDidMount: `);
    ApiURL.loginClick().then((response) => {
      console.log(`response: `, response)
      this.setState({
        listData: response.result
      })
    // do something
    }).then(() => {
      
      // console.log(`listData1`, listData);
    })
    .catch((error)=>{
      // error something
    })
  }

  render() {
    console.log(`render:this.props`, this.props)
    console.log(`render:this.state`, this.state)
    return (
      <div className={this.props.isActive ? "fadein h100" : "hidden"}>
        <h4>react原生组件导出, {this.props.name}</h4>
        <p>{this.state.title}</p>
        {/* <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
        <p>You clicked {count} times</p> */}
        <div></div>
        <div>
          { 
            this.state.listData.map(item => {
              return <div>{item.title}</div>
            })
          }
        </div>
      </div>
    )
  }
}
let ReactCom = ReactComClass;
export default ReactCom;

// import React, { useState, useEffect } from 'react';
// import ApiURL from './utils/HttpClientRequest/ApiURL';

// export default function ReactCom(props) {
//  函数形式
//   const [count, setCount] = useState(0);

//   // 地址请求使用
//   // let loginInfo = {
//   //   method: 'GET',
//   // };
//   let [listData, listDataMethod] = useState([]);
//   let data = [];
//   ApiURL.loginClick().then((response) => {
//     console.log(`response`, response)
//     data = response.data;
//     listDataMethod(data)
//     console.log(`data`, data)
//   // do something
//   }).then(() => {
    
//     // console.log(`listData1`, listData);
//   })
//   .catch((error)=>{
//     // error something
//   })

//   return (
//     <div className={props.isActive ? "fadein h100" : "hidden"}>
//       <p>You clicked {count} times</p>
//       <button onClick={() => setCount(count + 1)}>
//         Click me
//       </button>
//       <p>You clicked {count} times</p>
//       <div></div>
//       <div>
//         { 
//           listData.map(item => {
//             return <div>{item.name}</div>
//           })
//         }
//       </div>
//     </div>
//   )
// }